<template>
    <div class="busin-account">
        <el-header>
            <div class="drop-box">
                <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        企业信息<i class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="permission">权限设置</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            
        </el-header>
        <el-main>
            <el-tabs v-model="businessName" @tab-click="handleClick">
                <el-tab-pane label="企业信息" name="businessInfo">
                    <div class="business-name">
                        <img src="./logo.png" alt="" srcset="">
                        <span>航趣(上海)信息技术有限公司</span>
                    </div>
                    <div class="business-info">
                        <div class="certification">
                            <span>企业认证</span>
                            <el-button size="mini" style="background: #4065E0;color: #fff;border-radius:4px">重新认证</el-button>
                        </div>
                        <div class="infomation">
                            <div class="info-item">
                                <span>企业名称：</span>
                                <span>1141816791</span>
                            </div>
                            <div class="info-item">
                                <span>公司名称：</span>
                                <span>航趣(上海)信息技术有限公司</span>
                            </div>
                            <div class="info-item">
                                <span>纳税人识别号：</span>
                                <span>1234567890</span>
                            </div>
                            <div class="info-item">
                                <span>营业执照：</span>
                                <span>
                                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565600854592&di=16543eae25007d9b4d5dae53d5c37989&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190227%2F5a78d83aa4ea4f40af549f079d4ef2aa.jpeg" alt="" srcset="">
                                </span>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="企业成员" name="busniessMember">
                    <div class="add-member" style="text-align: right;">
                        <el-button size="mini" @click="addMember" style="background: #4065E0;color: #fff;width: 108px;height: 32px;border-radius: 4px">+添加新成员</el-button>
                    </div>
                    <div class="member-list">
                        <el-table
                        :data="memberList"
                        style="width: 100%">
                            <el-table-column
                                prop="role"
                                label="角色"
                                >
                            </el-table-column>
                            <el-table-column
                                prop="account"
                                label="账户"
                                >
                            </el-table-column>
                            <el-table-column label="操作">
                                
                                <template slot-scope="scope">
                                    <div v-if="scope.row.role === '管理员'">
                                        <el-link :underline="false" @click="transfer(scope.$index, scope.row)">转让</el-link>
                                    </div>
                                    <div v-else>
                                        <el-link :underline="false" @click="handleEdit(scope.$index, scope.row)">编辑</el-link>
                                        <span style="color: #4065E0">|</span>
                                        <el-link :underline="false" @click.native.prevent="handleDelete(scope.$index, memberList)">删除</el-link>
                                    </div>
                                    
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <el-dialog
                    title="邀请新成员"
                    :visible.sync="addNewMember"
                    width="50%"
                    :close-on-click-modal="false"
                    :close-on-press-escape="false"
                    :show-close="false"
                    top="24vh"
                    >
                        <div class="member-form">
                            <el-form ref="addMemberForm" :model="addMemberForm" label-width="140px">
                                <el-form-item label="选择角色" class="select-role">
                                    <el-radio-group v-model="addMemberForm.role">
                                        <el-radio label="administrator">管理员</el-radio>
                                        <el-radio label="market">市场</el-radio>
                                        <el-radio label="operate">运营</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="输入邀请人手机号">
                                    <el-select v-model="addMemberForm.region" style="width: 70px;margin-right: 6px">
                                        <el-option label="+86" value="+86"></el-option>
                                    </el-select>
                                    <el-form-item prop="phone"
                                    style="width: 236px"
                                    :rules="[
                                    { required: true, message: '请输入手机号', trigger: 'change' }
                                    ]">
                                        <el-input v-model="addMemberForm.phone" placeholder="输入手机号"></el-input>
                                    </el-form-item>
                                </el-form-item>
                                <el-form-item class="member-btn">
                                    <el-button style="margin-right: 58px;background: #4065E0;color: #fff" @click="saveSetting('addMemberForm')">保存</el-button>
                                    <el-button @click="addNewMember = false">取消</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-dialog>
                </el-tab-pane>
            </el-tabs>
        </el-main>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'BusinAccount',
    data() {
        return {
            businessName: 'businessInfo',
            memberList: [
                { role: '管理员', account: 'XFDG（我）' },
                { role: '运营1', account: 'HJGH' }
            ],
            addNewMember: false,
            addMemberForm: {
                role: 'market',
                region: '+86',
                phone: ''
            }
        }
    },
    methods: {
        handleClick(tab, event){

        },
        // 编辑
        handleEdit(index, row){

        },
        // 删除
        handleDelete(index, rows){
            rows.splice(index, 1);
        },
        // 转让
        transfer(index, row){

        },
        // 添加新成员
        addMember(){
            this.addNewMember = true
        },
        // dialog保存
        saveSetting(formName){
            
            this.$refs[formName].validate(valid => {
                if(valid){
                    alert('sumbit')
                    this.addNewMember = false
                }else{
                    return false
                }
            })
        },
        // 点击权限设置，跳转路由
        handleCommand(command){
            if(command=='permission'){
                this.$router.push({ name: 'Permission' })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.busin-account{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    // height: 1000px;
    background-color: #ffffff;
    .el-header{
        height: 50px !important;
        line-height: 50px;
    }
    .el-main{
        position: absolute;
        left: 0;
        right: 0;
        top: 50px;
        background-color: #ffffff;
        padding-top: 0;
        overflow: hidden;
        .business-name{
            height: 150px;
            line-height: 150px;
            img{
                display: inline-block;
                width: 62px;
                height: 32px;
                padding-left: 10px;
                vertical-align: middle;
            }
            span{
                padding-left: 16px;
                font-size: 16px;
            }
        }
        .business-info{
            .certification{
                display: flex;
                justify-content: space-between;
                padding: 0 16px;
                height: 32px;
                span{
                    line-height: 32px;
                    font-size: 14px;
                }
            }
            .infomation{
                margin-top: 20px;
                .info-item{
                    padding-left: 80px;
                    line-height: 50px;
                    display: flex;
                    span{
                        &:first-child{
                            color: #999999;
                            font-size: 14px;
                            width: 100px;
                        }
                        &:last-of-type{
                            padding-left: 40px;
                            font-size: 14px;
                        }
                        img{
                            width: 256px;
                            height: 166px;
                        }
                    }
                }
            }
        }
    }
}
.el-dropdown{
    font-size: 16px;
    font-weight: bold;
    .el-icon-caret-bottom{
        padding-left: 8px;
    }
}
.el-dropdown-menu{
    top: 92px !important;
    padding: 0;
    margin: 0;
    left: 220px !important;
    padding-top: 10px;
    .el-dropdown-menu__item{
        font-size: 14px;
        font-weight: bold;
    }
}
.el-link.el-link--default:hover{
    color: #4065E0;
}
.el-link.el-link--default{
    color: #4065E0;
}

</style>

